<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jQuery Validation</title>

		<!-- Bootstrap -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
		<style>
			body {
				padding-top: 70px;
			}
			
			.tab-content>.active {
				padding-top: 15px;
			}
		</style>
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
					<a class="navbar-brand" href="#">JQ validation</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#">Example</a>
						</li>
						<li>
							<a href="#">Options</a>
						</li>
						<li>
							<a href="#">Github</a>
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
		</nav>
		<div class="container">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<h3> Examples </h3>
					<ul class="nav nav-tabs" role="tablist" id="myTab">
						<li role="presentation" class="active">
							<a href="#Basis" role="tab" data-toggle="tab">Basis </a>
						</li>
						<li role="presentation">
							<a href="#Callback" role="tab" data-toggle="tab">Callback</a>
						</li>
						<li role="presentation">
							<a href="#Expand" role="tab" data-toggle="tab">Expand</a>
						</li>
						<li role="presentation">
							<a href="#Regular" role="tab" data-toggle="tab">Regular </a>
						</li>
					</ul>

					<!-- Tab panes -->
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane active" id="Basis">
							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">Html</h3>
								</div>
								<div class="panel-body">
									<textarea class="form-control" rows="18">
											
&lt;form class=&quot;form-horizontal&quot; role=&quot;form&quot; id=&quot;basis-form&quot;&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Email&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Input Email&quot; data-type=&#x27;email&#x27;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Password&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input type=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;Input Password&quot; data-type=&#x27;password&#x27;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Submit&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;
										</textarea>
								</div>
							</div>

							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">JS</h3>
								</div>
								<div class="panel-body">
									<pre>$('.form-horizontal').validation();</pre>
								</div>
							</div>

							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">RUN</h3>
								</div>
								<div class="panel-body">
									<form class="form-horizontal" role="form" id="basis-form">
										<div class="form-group">
											<label class="col-sm-2 control-label">Email</label>
											<div class="col-sm-10">
												<input type="email" class="form-control" placeholder="Input Email" data-type='email'>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">Password</label>
											<div class="col-sm-10">
												<input type="password" class="form-control" placeholder="Input Password" data-type='password'>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-offset-2 col-sm-10">
												<button type="button" class="btn btn-default">Submit</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="Callback">
							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">Html</h3>
								</div>
								<div class="panel-body">
									<textarea class="form-control" rows="18">
											
&lt;form class=&quot;form-horizontal&quot; role=&quot;form&quot; id=&quot;callback-form&quot;&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Email&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Input Email&quot; data-type=&#x27;email&#x27;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Password&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input type=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;Input Password&quot; data-type=&#x27;password&#x27;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Submit&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;
										</textarea>
								</div>
							</div>

							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">JS</h3>
								</div>
								<div class="panel-body">
									<pre>
$('#callback-form').validation({
	validationcallBack: function(status, dom, errorMsg, defaultValue) {
		status || layer.tips(errorMsg,dom);
	}
});
										</pre>
								</div>
							</div>

							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">RUN</h3>
								</div>
								<div class="panel-body">
									<form class="form-horizontal" role="form" id="callback-form">
										<div class="form-group">
											<label class="col-sm-2 control-label">Email</label>
											<div class="col-sm-10">
												<input type="email" class="form-control" placeholder="Input Email" data-type='email'>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">Password</label>
											<div class="col-sm-10">
												<input type="password" class="form-control" placeholder="Input Password" data-type='password'>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-offset-2 col-sm-10">
												<button type="button" class="btn btn-default">Submit</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="Expand">
							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">Html</h3>
								</div>
								<div class="panel-body">
									<textarea class="form-control" rows="23">
											
&lt;form class=&quot;form-horizontal&quot; role=&quot;form&quot; id=&quot;expand-form&quot;&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Email&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Input Email&quot; data-type=&#x27;email&#x27;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Zip code&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Input Zip code&quot; data-type=&#x27;zip&#x27;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Password&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input type=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;Input Password&quot; data-type=&#x27;password&#x27;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Submit&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;
										</textarea>
								</div>
							</div>

							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">JS</h3>
								</div>
								<div class="panel-body">
									<pre>
$('#expand-form').validation({
	validationcallBack: function(status, dom, errorMsg, defaultValue) {
		status || layer.tips(errorMsg, dom);
	},
	addOnRules: {
		zip: {
			validate: function(value) {
				return /^[1-9]\d{5}(?!\d)$/.test(value);
			},
			errorMsg: 'Input Zip code', 
			defaultValue: '400000' 
		}
	}
})
										</pre>
								</div>
							</div>

							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">RUN</h3>
								</div>
								<div class="panel-body">
									<form class="form-horizontal" role="form" id="expand-form">
										<div class="form-group">
											<label class="col-sm-2 control-label">Email</label>
											<div class="col-sm-10">
												<input type="email" class="form-control" placeholder="Input Email" data-type='email'>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">Zip code</label>
											<div class="col-sm-10">
												<input type="email" class="form-control" placeholder="Input Zip code" data-type='zip'>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">Password</label>
											<div class="col-sm-10">
												<input type="password" class="form-control" placeholder="Input Password" data-type='password'>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-offset-2 col-sm-10">
												<button type="button" class="btn btn-default">Submit</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="Regular">
							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">Html</h3>
								</div>
								<div class="panel-body">
									<textarea class="form-control" rows="20">
&lt;form class=&quot;form-horizontal&quot; role=&quot;form&quot;&gt;
	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label class=&quot;col-sm-2 control-label&quot;&gt;Email&lt;/label&gt;
		&lt;div class=&quot;col-sm-10&quot;&gt;
			&lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Input Email&quot; data-type=&#x27;email&#x27;&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label class=&quot;col-sm-2 control-label&quot;&gt;Password&lt;/label&gt;
		&lt;div class=&quot;col-sm-10&quot;&gt;
			&lt;input type=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;Input Password&quot; data-type=&#x27;password&#x27;&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-group&quot;&gt;
		&lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
			&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Submit&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;
										</textarea>
								</div>
							</div>

							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">JS</h3>
								</div>
								<div class="panel-body">
									<pre>
$('#regular-form').validation({
	validationcallBack: function(status, dom, errorMsg, defaultValue) {
		status || layer.tips(errorMsg, dom);
	}
})
										</pre>
								</div>
							</div>

							<div class="panel panel-default ">
								<div class="panel-heading">
									<h3 class="panel-title">RUN</h3>
								</div>
								<div class="panel-body">
									<form class="form-horizontal" role="form" id="regular-form">
										<div class="form-group">
											<label class="col-sm-2 control-label">Id Card</label>
											<div class="col-sm-10">
												<input type="email" class="form-control" placeholder="Input Id Card" data-type='reg' data-reg='/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/'>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">Zip code</label>
											<div class="col-sm-10">
												<input type="email" class="form-control" placeholder="Input Zip code" data-type='zip'>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">Password</label>
											<div class="col-sm-10">
												<input type="password" class="form-control" placeholder="Input Password" data-type='password'>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-offset-2 col-sm-10">
												<button type="button" class="btn btn-default">Submit</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
		<script type="text/javascript" src="js/validation.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#myTab a').click(function(e) {
					e.preventDefault()
					$(this).tab('show')
				});

				$(document).on('click', '#basis-form .btn', function() {
					$('#basis-form').validation();
				}).on('click', '#callback-form .btn', function() {
					$('#callback-form').validation({
						validationcallBack: function(status, dom, errorMsg, defaultValue) {
							status || layer.tips(errorMsg, dom);
						}
					})
				}).on('click', '#expand-form .btn', function() {
					$('#expand-form').validation({
						validationcallBack: function(status, dom, errorMsg, defaultValue) {
							status || layer.tips(errorMsg, dom);
						},
						addOnRules: {
							zip: {
								validate: function(value) {
									return /^[1-9]\d{5}(?!\d)$/.test(value);
								},
								errorMsg: 'Input Zip code', 
								defaultValue: '400000' 
							}
						}
					})
				}).on('click', '#regular-form .btn', function() {
					$('#regular-form').validation({
						validationcallBack: function(status, dom, errorMsg, defaultValue) {
							status || layer.tips(errorMsg, dom);
						}
					})
				});
			})
		</script>
	</body>

</html>